<template>
<div>

  <!--    返回导航栏-->
  <van-nav-bar
    :title="storeName"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />


<!--  商品-->
  <van-cell v-for="item in dishList">

    <!--                  商品卡片-->
    <van-card
      :price=item.price/100
      :desc=item.description
      :title=item.name
      thumb="https://yanxuan.nosdn.127.net/79b9d2e7a3c232b34972975cc1b6d644.png?quality=95&type=webp&imageView"
    >
      <template #tags>
        <van-tag plain type="danger">{{ item.categoryName }}</van-tag>
      </template>
      <!--                    按钮-->
      <template #footer>
        <van-button icon="plus" type="primary"
                    style="width: .1rem;height: .5rem;background-color: red;border: transparent"
                    @click="addCart(item)"/>
      </template>
    </van-card>
  </van-cell>

  <!--                购物车pop-->
  <van-popup
    v-model:show="show"
    closeable
    close-icon-position="top-left"
    position="bottom"
    :style="{ height: '50%' }"
  >
    <!--                  购物车内容-->
    <van-card
      v-for="cart in cartList"
      :price=cart.amount*cart.number/100.00
      :title=cart.name
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      style="padding-top: 1rem;height: 3rem"
    >
      <template #footer>
        <!--                      进步器-->
        <van-stepper v-model="cart.number" min="" @change="updateCart(cart)"/>
      </template>

    </van-card>
    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <!--                  购物车-->
      <van-icon name="shopping-cart-o" size=".5rem"
                :badge="cartNum"
                color="#ee0a24"
                style="margin-right: 1rem;float: right"
                @click="showPopup"/>
    </van-submit-bar>
    <!--                  留白-->
    <div style="height: 1rem;"></div>
  </van-popup>

  <!--                吸底-->
  <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
    <van-icon name="shopping-cart-o" size=".5rem"
              :badge="cartNum"
              color="#ee0a24"
              style="margin-right: 1rem"
              @click="showPopup"/>
  </van-submit-bar>
</div>
</template>

<script>
export default {
  name: "goods",
  data(){
    return{
      storeId:1,
      sidebar_active: '',
      tab_active: '',
      queryVo: {
        currentPage: 1,
        pageSize: 100,
        storeId: -1,
        name: ''
      },
      dishList: [],
      loading: false,
      finished: false,
      refreshing: false,
      totalPrice: 0,
      value: 0,
      storeName: '',
      cartNum: 0,
      cartList: [],
      show: false,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.dishList = [];
          this.refreshing = false;
        }
        let newList = []
        newList = this.nextPage();
        this.dishList = this.dishList.concat(newList)
        console.log("dishList", this.dishList)
        this.loading = false;
        console.log("newList", newList)
        if (!newList) {
          this.finished = true;
        }
        console.log(this.dishList)
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    nextPage() {
      let _this = this
      _this.queryVo.currentPage += 1
      this.$axios.post("/dish/queryAll", _this.queryVo).then(resp => {
        console.log("nextPage", resp.data.data.pageInfo.list)
        return resp.data.data.pageInfo.list
      })
    },
    onSubmit() {
      console.log(this.cartList)
      this.$toast.success("提交成功")
    },
    jumpToDetail(id) {
      console.log(id)
      this.$router.push("/dish/" + id)
    },
    addCart(item) {
      console.log("添加菜品", item)
      let _this = this
      this.$axios.post("/shoppingCart/add", item).then(resp => {
        console.log(resp)
        if (resp.data.result) {
          _this.$toast.success(resp.data.message)
          _this.queryCart()
        }
      })

    },
    queryCart() {
      let _this = this
      this.$axios.get("/shoppingCart/queryAll/" + _this.queryVo.storeId).then(resp => {
        console.log(resp)
        if (resp.data.result) {
          _this.cartList = resp.data.data.carts
        }
        _this.refreshCart(_this)
      })
    },
    showPopup() {
      this.show = !this.show
    },
    minus() {
      console.log("111111")
    },
    updateCart(cart) {
      console.log(cart)
      let _this = this
      this.$axios.post("/shoppingCart/update", cart).then(resp => {
        console.log(resp)
        if (resp.data.result) {
          _this.cartList = resp.data.data.carts
        }
        this.refreshCart(_this)
      })
    },
    refreshCart(_this) {
      let tempNum = 0
      let tempTotal = 0
      let c
      console.log("cartList", _this.cartList)
      for (c in _this.cartList) {

        console.log(tempNum, _this.cartList[c].number)
        tempNum = parseInt(_this.cartList[c].number) + parseInt(tempNum)
        tempTotal = _this.cartList[c].number*_this.cartList[c].amount+tempTotal

      }
      _this.cartNum = tempNum
      _this.totalPrice = tempTotal
    }
  },
  created() {
    // console.log("storeId", this.$route.params.id)
    let _this = this
    // let storeId = this.$route.params.id
    this.queryVo.storeId = this.storeId
    this.storeName = this.$route.params.storeName

    //
    this.$axios.post("/dish/queryAll", _this.queryVo).then(resp => {
      console.log(resp)
      _this.dishList = resp.data.data.pageInfo.list
    })

    this.queryCart()
  }

}
</script>

<style scoped>

</style>
